<template>
  <div class="book-detail">
    <t-card :bordered="false" class="content-card">
      <template #title>
        <t-space size="18px">
          <h2 class="card-title">采购订单</h2>
        </t-space>
      </template>

      <div class="filter ">
        <div class="pb16">
          <div class="tabs">
            <div class="item-tab" :class="{'active-tab': params.order_status === item.name}" v-for="(item, index) in tabs" :key="index" @click="changeTab(item)">
              <p>{{item.title}}</p>
              <p v-if="item.count" class="count">({{item.count}})</p>
            </div>
          </div>
        </div>
        <t-space size="12px">
          <t-select style="width: 220px;" v-model="params.agent_id" :options="agentList" clearable @change="getData" placeholder="按代理商筛选">
            <template #label>
              <icon-font name="layers" style="color: #000;"/>
            </template>
          </t-select>
          <t-date-range-picker style="width: 260px;" allow-input clearable @change="changeDate" :placeholder="['订单开始日期', '订单结束日期']" />

          <t-input style="width: 220px;" v-model="params.key" clearable @change="changeKey" @enter="getData" placeholder="关键字搜索">
            <template #label>
              <icon-font name="search" size="16px" style="color:#000;font-weight: bold"/>
            </template>
          </t-input>
        </t-space>
      </div>

      <div class="pt16">
        <t-table
          rowKey="id"
          :data="lists"
          :columns="columns"
          :stripe="stripe"
          :bordered="bordered"
          :hover="hover"
          :size="size"
          :max-height="maxHeight"
          :table-layout="tableLayout ? 'auto' : 'fixed'"
          :showHeader="showHeader"
          cellEmptyContent="-"
          resizable
          :loading="loading"
          @page-change="pageChange"
          :pagination="pagination"
        >
          <template #title-slot-option></template>
          <template #pay_produce="{row}">
            <p>￥{{ row.pay_produce }}</p>
          </template>
          <template #order_status="{row}">
            <!--<template v-if="row.status === 1">-->
            <!--  <template v-if="row.is_pay === -1">-->
            <!--    <t-tag theme="danger" variant="outline">已取消</t-tag>-->
            <!--  </template>-->
            <!--  <template v-if="row.is_pay === 0">-->
            <!--    <t-tag theme="warning" variant="outline">待付款</t-tag>-->
            <!--  </template>-->
            <!--  <template v-if="row.is_pay === 1">-->
            <!--    <t-tag v-if="row.is_all_pay === 0" theme="warning" variant="outline">部分付款</t-tag>-->
            <!--    <t-tag v-if="row.is_all_pay === 1" theme="warning" variant="outline">全部付款</t-tag>-->
            <!--  </template>-->
            <!--</template>-->
            <!--<template v-if="row.status === -1">-->
            <!--<t-tag theme="default" variant="outline">已失效</t-tag>-->
            <!--</template>-->
            <!--2 待付款/3 待确认/4 待发货/5 待收货/1 已完成/-1 已取消-->
            <t-tag v-if="row.order_status === -1" theme="default" variant="outline">已取消</t-tag>
            <t-tag v-if="row.order_status === 1" theme="success" variant="outline">已完成</t-tag>
            <t-tag v-if="row.order_status === 2" theme="warning" variant="outline">待付款</t-tag>
            <t-tag v-if="row.order_status === 3" theme="warning" variant="outline">待确认</t-tag>
            <t-tag v-if="row.order_status === 4" theme="warning" variant="outline">待发货</t-tag>
            <t-tag v-if="row.order_status === 5" theme="warning" variant="outline">待收货</t-tag>
          </template>
          <template #option="{row}">
            <t-space size="12px">
              <!--<t-link theme="primary" class="edit-btn-color" style="flex-shrink: 0;" hover="color">改价</t-link>-->
              <!--<t-link theme="primary" class="edit-btn-color" style="flex-shrink: 0;" hover="color">发货</t-link>-->
              <t-link theme="primary" class="edit-btn-color" style="flex-shrink: 0;" hover="color" @click="handleInfo(row)">详情</t-link>
              <!--<t-link theme="primary" class="edit-btn-color" style="flex-shrink: 0;" hover="color">关闭订单</t-link>-->
            </t-space>
          </template>
        </t-table>
      </div>
    </t-card>


    <order-detail ref="info" @refresh="getList"></order-detail>
  </div>
</template>

<script lang="jsx">
import {IconFont, CalendarIcon, BrowseIcon} from "tdesign-icons-vue";
import IconUAV from "@/components/icon-UAV/index.vue";
import OrderDetail from "@/pages/order/purchase-list/components/order-detail.vue";
import {agentListApi} from "@/api/agent";
import {agentOrderListApi, agentOrderOrderStatusDataApi} from "@/api/order";

export default {
  name: 'PurchaseList',
  components: {OrderDetail, IconUAV, IconFont, BrowseIcon},
  data() {
    return {
      params: {
        page: 1,
        limit: 10,
        key: '', //  string 搜索：单号/收件人 可选
        agent_id: '', // integer 代理商ID 可选
        user_id: '', // integer 用户ID 可选
        order_status: '', // 0全部/2待付款/3待确认/4待发货/5待收货/1已完成/-1已取消
        start_date: '', // string 可选 订单开始日期，yyyy-MM-dd
        end_date: '', // string 可选 订单结束日期，yyyy-MM-dd
      },
      lists: [],
      size: 'medium',
      tableLayout: false,
      stripe: false,
      bordered: false,
      hover: true,
      showHeader: true,
      columns: [
        {colKey: 'id', title: 'ID', width: 66},
        {colKey: 'order_no', title: '订单号', width: 180},
        {colKey: 'user_name', title: '用户信息', width: 120},
        {colKey: 'pay_produce', title: '实际支付', width: 120},
        //{colKey: 'pay_time', title: '支付时间', width: 180},
        {colKey: 'order_status', title: '状态', width: 140},
        {colKey: 'option', title: 'title-slot-option', fixed: 'right', width: 80},
      ],
      selectedRowKeys: [],
      pagination: {
        current: 1,
        pageSize: 10,
      },
      maxHeight: 472,
      loading: false,

      agentList: [],
      tabs: []
    };
  },
  mounted() {
    let height = document.documentElement.clientHeight - 286;
    this.maxHeight = height
    window.onresize = () => {
      // 获取屏幕高度 - 顶部高度
      height = document.documentElement.clientHeight - 286;
      this.maxHeight = height
    };
    this.getData()
    this.getAgentList()
    this.agentOrderOrderStatusData()
  },
  methods: {
    changeTab(item) {
      this.params.order_status = item.name
      this.getData()
    },
    // 获取状态数据
    agentOrderOrderStatusData() {
      agentOrderOrderStatusDataApi().then(res=> {
        this.tabs = res.data
        this.params.order_status = this.tabs[0].name
      }).catch(err=> {
        console.log('err', err)
      })
    },
    // 获取列表
    getAgentList() {
      const params = {
        page: 1,
        limit: 10,
        key: '', // 搜索：编号/手机/姓名
        is_agent: '', // 状态：-1驳回；1已审已激活；101审核中；102已审待激活（付尾款）；103已禁用
      }
      agentListApi(params).then(res => {
        this.agentList = res.data.map((item, index) => ({...item, label: item.name, value: item.id}))
      }).catch(err => {
      })
    },
    // 详情
    handleInfo(row) {
      this.$refs.info.open(row);
    },
    // 关键字搜索
    changeKey(val) {
      clearTimeout(this.timer)
      this.timer = setTimeout(()=> {
        this.getData()
      }, 500)
    },
    // 日期搜索
    changeDate(value) {
      this.params.start_date = value[0]
      this.params.end_date = value[1]
      this.getData()
    },
    getData() {
      this.pagination.current = 1
      this.getList()
    },
    getList() {
      this.loading = true
      this.params.page = this.pagination.current
      this.params.limit = this.pagination.pageSize
      agentOrderListApi(this.params).then(res=> {
        this.lists = res.data
        this.pagination.total = res.count
      }).catch(err=> {
        console.log('err', err)
      }).finally(()=> {
        this.loading = false
      })
    },
    // 切换分页
    pageChange(pageInfo) {
      const {current, pageSize,} = pageInfo
      this.pagination.current = current
      this.pagination.pageSize = pageSize
      this.getList()
    },
  },
}
</script>

<style lang="less" scoped>
.book-detail {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--td-radius-medium);
  background-color: #FFFFFF;
}

/deep/ .content-card {

  .t-card__header {
    padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
    padding-bottom: 0;
  }

  .t-card__body {
    padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl) var(--td-comp-paddingTB-m);
  }

  .setting-btn {
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    text-align: left;
    color: #005687;
  }

  .invite-btn {
    font-size: 12px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: left;
    color: #005687;

    background-color: #F3FBFF;
    border: 1px solid #005687;
    border-radius: var(--td-radius-default);
  }
}

/deep/ .action-btn {
  width: 126px;
  height: 42px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22.4px;
  text-align: left;
  color: #FFFFFF;

  .t-button__text {
    display: flex;
    align-items: center;
    justify-content: center;

    i {
      z-index: 2;
      font-size: 12px;
      font-weight: bold;
      margin-right: 6px;

      &:after {
        position: absolute;
        display: inline-block;
        content: '';
        top: 50%;
        left: 50%;
        width: 14px;
        height: 14px;
        z-index: -1;
        background-color: #FFFFFF;
        border-radius: var(--td-radius-round);
        transform: translateX(-50%) translateY(-50%);
      }
    }
  }
}

.action-btn1 {
  background-color: #14A54E;
  border: 1px solid #14A54E;

  i {
    color: #14A54E;
  }
}

.action-btn2 {
  background-color: #FF5C46;
  border: 1px solid #DFE3E7;
}

.action-btn3 {
  background-color: #565656;
  border: 1px solid #DFE3E7;
}

.action-btn4 {
  color: black;
  background-color: #F9F9F9;
  border: 1px solid #E1E1E1;
}

/deep/ .filter {
  padding-top: 13px;
  //display: flex;
  //align-items: center;
  //justify-content: space-between;

  .t-input, .t-input.t-is-readonly {
    background-color: #F8F8F8;
  }
}

.tabs {
  display: flex;
  align-items: center;

  .item-tab {
    display: flex;
    cursor: pointer;
    padding: 0 12px 12px;

    position: relative;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
    text-align: left;
    color: rgba(0,0,0,0.3);

  }

  .active-tab {
    font-size: 18px;
    font-weight: 600;
    line-height: 25.2px;
    text-align: left;
    color: black;

    &:after {
      position: absolute;
      content: '';
      left: 50%;
      bottom: 0;
      width: 80%;
      height: 5px;
      transition: all .3s;
      border-radius: 99px;
      transform: translateX(-50%);
      background-color: var(--td-brand-color);
    }
  }
}

//.import-btn {
//  width: 69px;
//  color: #000000;
//  font-size: 14px;
//  font-weight: 400;
//  line-height: 19.6px;
//  background-color: #F9F9F9;
//  border: 1px solid #E1E1E1;
//}

.income {
  color: #14A54E;
  display: flex;
  align-items: center;

  i {
    width: 17px;
    height: 17px;
    color: #FFFFFF;
    font-size: 12px;
    display: flex;
    margin-left: 8px;
    align-items: center;
    justify-content: center;
    background-color: #14A54E;
    border-radius: var(--td-radius-small);
  }
}

.expenditure {
  color: #FF5C46;
  display: flex;
  align-items: center;

  i {
    width: 17px;
    height: 17px;
    color: #FFFFFF;
    font-size: 12px;
    display: flex;
    margin-left: 8px;
    align-items: center;
    justify-content: center;
    background-color: #FF5C46;
    border-radius: var(--td-radius-small);
  }
}

.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #F9F9F9;
  padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-xl);
  padding-right: var(--td-comp-paddingLR-xxl);
}
</style>
